<template>
  <div class="app-container">
    <el-form
      :model="formData"
      ref="form"
      size="small"
      label-position="right"
      label-width="100px"
    >
      <!-- <el-form-item label="引用流程" prop="processDefinitionId">
        <el-cascader
          v-model="formData.processDefinitionId"
          :options="flowData"
          clearable
          filterable
          :show-all-levels="false"
          style="width: 40%"
          :props="{
            expandTrigger: 'click',
            multiple: false,
            checkStrictly: false,
            value: 'id',
            label: 'name',
          }"
          disabled
        >
        </el-cascader>
        <el-descriptions :column="4">
          <el-descriptions-item label="流程标识">{{
            currFlow.key
          }}</el-descriptions-item>
          <el-descriptions-item label="表单信息">{{
            currFlow.description
          }}</el-descriptions-item>
          <el-descriptions-item label="流程版本">{{
            currFlow.version
          }}</el-descriptions-item>
          <el-descriptions-item label="部署时间">{{
            currFlow.publishTime
          }}</el-descriptions-item>
        </el-descriptions>
      </el-form-item> -->
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="事项类型" prop="title">
            <el-radio-group v-model="formData.type" disabled>
              <el-radio :label="1" @change="">企业</el-radio>
              <el-radio :label="2" @change="">个人</el-radio>
              <el-radio :label="3" @change="">工作台</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="事项主题" prop="title">
            <el-input v-model="formData.title" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="起止日期" prop="endTime">
            <el-date-picker
              v-model="dateTime"
              style="width: 340px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="事项内容" prop="content">
        <div v-html="formData.content" class="content-wrap"></div>
      </el-form-item>
      <el-form-item label="联系人信息" prop="contacts">
        <div
          v-html="formData.contacts"
          class="content-wrap"
          style="max-height: 100px"
        ></div>
      </el-form-item>
      <el-form-item label="附件清单" prop="uploadPath">
        <file-upload
          v-model="fileList"
          disabled
          :isShowTip="false"
          :fileSize="20"
          :limit="20"
        >
          <template #pre-name="{ index }">
            <span> 附件{{ index + 1 }}&nbsp;&nbsp; </span>
          </template>
        </file-upload>
      </el-form-item>

      <el-form-item label="流程" prop="sonList">
        <div
          v-for="(son, idx) in formData.sonList"
          class="corporate-son-process"
        >
          <el-input
            v-model="son.title"
            placeholder="请输入子流程事项主题"
            clearable
            disabled
            @keyup.enter.native="handleQuery"
          />

          <el-select
            v-model="son.processDefinitionId"
            placeholder="请选择子流程"
            clearable
            filterable
            disabled
          >
            <el-option
              v-for="item in flowData"
              :key="item.id"
              :label="`${item.key}  ${item.name}`"
              :value="item.id"
            >
              <div style="display: flex">
                <span style="min-width: 40%">{{ item.key }}</span>
                <span>{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
import { getNoticeDetail, getNoticeProcessList } from "@/api/enterprise/info";
import { getProcessDefinitionList } from "@/api/bpm/definition";

export default {
  components: { FileUpload },
  data() {
    const { id } = this.$route.query;
    return {
      id,
      formData: {
        id: "",
        processDefinitionId: [],
        publishTime: "",
        title: "",
        startTime: "",
        endTime: "",
        content: "",
        sonList: [], // 绑定的多流程
        contacts: "", // 联系人
        uploadPath: "", // 附件，多个，逗号隔开
      },
      fileList: [],
      dateTime: [], // 开始时间、结束时间
      flowData: [],
      /* currFlow: {
        key: "",
        description: "",
        version: "",
        publishTime: "",
      }, */
    };
  },
  created() {
    /* Promise.all([this.getFlowList(), this.getDetail()]).then(
      ([flowData, processDefinitionId]) => {
        if (flowData && flowData.length && processDefinitionId) {
          this.currFlow =
            flowData.filter(({ id }) => processDefinitionId == id)[0] || {};
        }
      }
    ); */
    this.getFlowList();
    this.getDetail();
    this.getProcessList();
  },
  methods: {
    /** 查询流程定义列表 */
    async getFlowList() {
      const res = await getProcessDefinitionList({
        suspensionState: 1,
      });
      const flowData = res?.data || [];
      this.flowData = flowData;
      return flowData;
    },
    async getDetail() {
      const { data } = await getNoticeDetail({ id: this.id });
      this.formData = {
        ...this.formData,
        ...(data || {}),
        processDefinitionId: data.processDefinitionId
          ? [data.processDefinitionId]
          : [],
        type: data.type ? data.type : 1,
      };
      // 设置附件
      this.setFileList();
      this.setDateTime();
      // return data.processDefinitionId;
    },
    setFileList() {
      const uploadPath = this.formData.uploadPath
        ? this.formData.uploadPath.split(",")
        : [];
      const uploadFilename = this.formData.uploadFilename
        ? this.formData.uploadFilename.split(",")
        : [];
      this.fileList = uploadPath.map((url, i) => ({
        url,
        name: uploadFilename[i] ? uploadFilename[i] : url,
      }));
    },
    setDateTime() {
      this.dateTime = [
        new Date(this.formData.startTime),
        new Date(this.formData.endTime),
      ];
    },

    async getProcessList() {
      if (this.id) {
        const { data } = await getNoticeProcessList(this.id);
        this.formData.sonList = data;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content-wrap {
  padding: 4px 16px;
  background-color: #f5f7fa;
  border: 1px solid #dfe4ed;
  border-radius: 4px;
  height: 300px;
  overflow-y: auto;
  line-height: 1.25em;
}

.corporate-son-process {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  > *:not(.el-button) {
    width: 45%;
    margin-right: 10px;
  }
}
</style>
